<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
  .input_Combox {
    display: flex;
    padding: 5px 10px;
    border: 1px solid #f3f3f3;
    align-items: center;
  }

  .input_left {
    padding-right: 10px;
    font-size: 12px;
    font-weight: bolder;
  }

  .input_content {
    display: flex;
    align-items: center;
  }

  .content_text {
    border: 1px solid #666;
    display: flex;
    padding: 3px 5px;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
  }

  ::-ms-clear {
    display: none;
  }

  .input_box {
    border: 0;
    outline: none;
  }

  .input_icon {
    padding-left: 20px;
    display: flex;
    align-items: center;
  }

  .input_iconA {
    color: #ccc;
    font-size: 12px;
  }

  .input_iconA:hover {
    color: #FF0000;
    font-size: 12px;
  }

  .explain_box {
    font-size: 12px;
    color: #aaa;
    padding: 10px 0;
    padding-left: 10px;
  }

  .icon_text {
    padding-right: 6px;
  }
</style>

<body>
  <div id="app"></div>
  <div id="mark"></div>
</body>
<!-- 引入 js 文件 -->
<!-- React 核心的交互代码 -->
<script src="./node_modules//react/umd/react.development.js"></script>
<!-- React dom 渲染的核心代码 -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 导入 Babel 插件，作用是将高版本的 JSX 语法进行低版本兼容 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  // 定义左侧提示文本
  let text_type="手机号"
  // 定义输入框提示文本
  let input_tips="请输入您的手机号"
  // 定义底层 div 的提示信息
  let text_explain="请牢记您设置的密保问题及答案，以便于您忘记密码时通过此“密保问题、答案”找回密码。"
  // 正确提示信息
  let prompt_Cor="输入正确"
  // 错误提示信息
  let prompt_Err="请输入正确的手机号"
  // 输入框类型
  let input_type="text"
  // 输入框输入的内容
  let input_delete = null



  class InputBox extends React.Component {
    constructor(props){
      super(props);
      console.log(props)
      this.state = {
        input_delete:this.input_delete,
        content_correct:{
          fontSize:'14px',
          display: 'flex',
          alignItems: 'center',
          color: '#00AD6C',
          display: 'none',
        },
        content_error:{
          fontSize:'14px',
          display: 'flex',
          alignItems: 'center',
          color: '#FF0000',
          display: 'none',
        },

      }
      this.deleteClick = this.deleteClick.bind(this);
      this.changeFormatText = this.changeFormatText.bind(this);
    }
    // 删除按钮
    deleteClick(){
      document.querySelector(".input_box").value=''
    }
    // 输入验证
    changeFormatText(event){
      let val = event.target.value;
      if(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)){
        this.setState(state=>{
          return{
            content_correct:{
              ...state.content_correct,
              display:"block"
            }
          }
        })
        console.log('正确'+state)
      }else{
        this.setState(state=>{
          return{
            content_error:{
              ...state.content_error,
              display:"block"
            }
          }
        })
      }
      console.log('错误'+state)
    }

    render() {
      return (
        <div>
          <div className="input_Combox">
            <div className="input_left">
              <span >{text_type}</span>
            </div>
            <div className="input_content">
              <div className="content_text">
                <input className="input_box" defaultValue={input_delete} type={input_type} placeholder={input_tips} onChange={this.changeFormatText}/>
                <div className="input_icon">
                  <span className="iconfont icon-shanchu input_iconA" onClick={this.deleteClick}></span>
                </div>
              </div>
              <div style={this.state.content_correct}>
                <span className="iconfont icon-zhengque icon_text"></span>
                <span>{prompt_Cor}</span>
              </div>
              <div style={this.state.content_error}>
                <span className="iconfont icon-shanchu1 icon_text"></span>
                <span>{prompt_Err}</span>
              </div>
            </div>
          </div>
          <div className="explain_box">
            <span className="explain_text">{text_explain}</span>
          </div>
        </div>
      )
    }
    
  }
  ReactDOM.render(<InputBox/>,document.querySelector('#app'));
</script>

</html>